/*
 * @Description: diff算法体验
 * @Author: wangqi
 * @Date: 2021-05-09 11:20:14
 * @LastEditTime: 2021-05-10 23:11:51
 */
import {
    h,
    init,
    classModule, propsModule, styleModule, eventListenersModule,
} from "snabbdom";


// 创建出patch函数
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);

/*
    diff比较规则：
        1. 只有是同一个虚拟节点，才进行比较; 否则就是暴力删除旧的，插入新的
            - 如何定义同一个虚拟节点：选择器相同且key 相同
            
        2. 只进行同层比较，不会进行跨层比较。跨层比较采用暴力删除旧的，再插入新的;

*/

let btn = document.querySelector('#btn');
let container = document.querySelector('#container');

let vnode = h('ul', { key: 'ul' }, [
    h('li', { key: 'A' }, 'A'),
    h('li', { key: 'B' }, 'B'),
    h('li', { key: 'C' }, 'C'),
]);

patch(container, vnode);

let vnode1 = h('ul', { key: 'ul' }, [
    h('li', { key: 'A' }, 'A1'),
    h('li', { key: 'B' }, 'B'),
    h('li', { key: 'C' }, 'C'),
    h('li', { key: 'D' }, 'D1'),
]);

btn.onclick = function () {
    // vnode1 替换 vnode
    patch(vnode, vnode1)
};


